<template>
  <main class="diy-page">
    <div class="container">
      <!-- 左侧：自由创作 -->
      <div class="free-creation-section">
        <h2 class="section-title">自由创作</h2>
        <p class="section-description">自由选择花材、包装和贺卡</p>
        <div class="selection-section">
          <div class="selection-tabs">
            <button
              v-for="tab in tabs"
              :key="tab.id"
              class="tab-btn"
              :class="{ active: activeTab === tab.id }"
              @click="activeTab = tab.id"
            >
              {{ tab.name }}
            </button>
          </div>

          <!-- 花材选择 -->
          <div class="selection-content" v-if="activeTab === 'flowers'">
            <h3 class="selection-title">选择花材</h3>
            <p class="selection-description">挑选您喜欢的花材组合</p>

            <div class="flowers-grid">
              <div
                v-for="flower in availableFlowers"
                :key="flower.id"
                class="flower-card"
                :class="{ selected: isFlowerSelected(flower.id) }"
              >
                <div class="flower-image">
                  <img :src="flower.image" :alt="flower.name" />
                </div>
                <div class="flower-info">
                  <h4 class="flower-name">{{ flower.name }}</h4>

                  <div class="quantity-selector">
                    <button
                      class="quantity-btn"
                      @click="decreaseFlowerQuantity(flower.id)"
                      :disabled="!isFlowerSelected(flower.id)"
                    >
                      -
                    </button>
                    <span class="quantity">{{
                      getFlowerQuantity(flower.id)
                    }}</span>
                    <button
                      class="quantity-btn plus-btn"
                      @click="increaseFlowerQuantity(flower.id)"
                    >
                      <span class="plus-icon">+</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 包装选择 -->
          <div class="selection-content" v-if="activeTab === 'packaging'">
            <h3 class="selection-title">选择包装</h3>
            <p class="selection-description">精美包装增添仪式感</p>

            <div class="packaging-grid">
              <div
                v-for="packaging in availablePackaging"
                :key="packaging.id"
                class="packaging-card"
                :class="{
                  selected:
                    selectedPackaging && selectedPackaging.id === packaging.id,
                }"
                @click="selectPackaging(packaging)"
              >
                <div class="packaging-image">
                  <img :src="packaging.image" :alt="packaging.name" />
                </div>
                <div class="packaging-info">
                  <h4 class="packaging-name">{{ packaging.name }}</h4>
                  <div class="packaging-select">
                    <span
                      v-if="
                        selectedPackaging &&
                        selectedPackaging.id === packaging.id
                      "
                      >已选择</span
                    >
                    <button v-else class="select-btn">
                      <span class="plus-icon">+</span> 选择
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 贺卡选择 -->
          <div class="selection-content" v-if="activeTab === 'card'">
            <h3 class="selection-title">选择贺卡</h3>
            <p class="selection-description">附上您的祝福</p>

            <div class="cards-grid">
              <div
                v-for="card in availableCards"
                :key="card.id"
                class="card-item"
                :class="{ 'selected': selectedCard &amp;&amp; selectedCard.id === card.id }"
                @click="selectCard(card)"
              >
                <div class="card-image">
                  <img :src="card.image" :alt="card.name" />
                </div>
                <div class="card-info">
                  <h4 class="card-name">{{ card.name }}</h4>
                </div>
                <div class="card-select">
                  <span v-if="selectedCard && selectedCard.id === card.id"
                    >已选择</span
                  >
                  <button v-else class="select-btn">
                    <span class="plus-icon">+</span> 选择
                  </button>
                </div>
              </div>
            </div>

            <div class="card-message" v-if="selectedCard">
              <h4 class="message-title">贺卡留言</h4>
              <textarea
                v-model="cardMessage"
                class="message-input"
                placeholder="请输入您想要表达的祝福..."
                rows="4"
              ></textarea>
            </div>
          </div>
        </div>
        <div class="preview-container">
          <div class="preview-info">
            <div class="preview-details">
              <p v-if="selectedFlowers.length > 0">
                <strong>已选花材:</strong>
                <span
                  v-for="(flower, index) in selectedFlowers"
                  :key="flower.id"
                >
                  {{ flower.name }} x{{ flower.quantity
                  }}{{ index < selectedFlowers.length - 1 ? ", " : "" }}
                </span>
              </p>
              <p v-if="selectedPackaging">
                <strong>包装:</strong> {{ selectedPackaging.name }}
              </p>
              <p v-if="selectedCard">
                <strong>贺卡:</strong> {{ selectedCard.name }}
              </p>
            </div>
          </div>

          <div class="action-buttons">
            <button class="btn-outline" @click="resetSelection">
              重新选择
            </button>
            <button class="btn-ai" @click="generateFromSelection">
              AI生成
            </button>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
export default {
  name: "DiyCreate",
  data() {
    return {
      // 自由创作模式数据
      activeTab: "flowers",
      tabs: [
        { id: "flowers", name: "花材选择" },
        { id: "packaging", name: "包装选择" },
        { id: "card", name: "贺卡选择" },
      ],
      availableFlowers: [
        {
          id: 1,
          name: "粉玫瑰",
          price: 15,
          image:
            "@/assets/image.png",
        },
        {
          id: 2,
          name: "红玫瑰",
          price: 18,
          image: "@/assets/image.png",
        },
        {
          id: 3,
          name: "向日葵",
          price: 20,
          image: "@/assets/image.png",
        },
        {
          id: 4,
          name: "百合",
          price: 25,
          image: "@/assets/image.png",
        },
        {
          id: 5,
          name: "满天星",
          price: 10,
          image: "@/assets/image.png",
        },
        {
          id: 6,
          name: "绿叶",
          price: 5,
          image: "@/assets/image.png",
        },
        {
          id: 7,
          name: "洋桔梗",
          price: 18,
          image: "@/assets/image.png",
        },
        {
          id: 8,
          name: "绣球花",
          price: 35,
          image: "@/assets/image.png",
        },
      ],
      availablePackaging: [
        {
          id: 1,
          name: "简约牛皮纸",
          price: 15,
          image: "@/assets/image.png",
        },
        {
          id: 2,
          name: "韩式花束包装",
          price: 25,
          image: "@/assets/image.png",
        },
        {
          id: 3,
          name: "礼盒包装",
          price: 45,
          image: "@/assets/image.png",
        },
      ],
      availableCards: [
        {
          id: 1,
          name: "生日贺卡",
          price: 10,
          image: "@/assets/image.png",
        },
        {
          id: 2,
          name: "爱情贺卡",
          price: 10,
          image: "@/assets/image.png",
        },
        {
          id: 3,
          name: "感谢贺卡",
          price: 10,
          image: "@/assets/image.png",
        },
      ],
      selectedFlowers: [],
      selectedPackaging: null,
      selectedCard: null,
      cardMessage: "",
      bouquetName: "",
      previewImage: "@/assets/image.png",
      bouquetPrice: 0,
    };
  },
  methods: {
    isFlowerSelected(flowerId) {
      return this.selectedFlowers.some((flower) => flower.id === flowerId);
    },
    getFlowerQuantity(flowerId) {
      const flower = this.selectedFlowers.find(
        (flower) => flower.id === flowerId
      );
      return flower ? flower.quantity : 0;
    },
    increaseFlowerQuantity(flowerId) {
      const flower = this.selectedFlowers.find(
        (flower) => flower.id === flowerId
      );
      if (flower) {
        flower.quantity += 1;
      } else {
        const flowerToAdd = this.availableFlowers.find(
          (flower) => flower.id === flowerId
        );
        this.selectedFlowers.push({
          ...flowerToAdd,
          quantity: 1,
        });
      }
    },
    decreaseFlowerQuantity(flowerId) {
      const flowerIndex = this.selectedFlowers.findIndex(
        (flower) => flower.id === flowerId
      );
      if (flowerIndex !== -1) {
        if (this.selectedFlowers[flowerIndex].quantity > 1) {
          this.selectedFlowers[flowerIndex].quantity -= 1;
        } else {
          this.selectedFlowers.splice(flowerIndex, 1);
        }
      }
    },
    selectPackaging(packaging) {
      this.selectedPackaging = packaging;
    },
    selectCard(card) {
      this.selectedCard = card;
    },
    calculateTotalPrice() {
      // 如果有设置bouquetPrice，则直接返回
      if (this.bouquetPrice > 0) {
        return this.bouquetPrice;
      }

      let total = 0;

      // 花材价格
      this.selectedFlowers.forEach((flower) => {
        total += flower.price * flower.quantity;
      });

      // 包装价格
      if (this.selectedPackaging) {
        total += this.selectedPackaging.price;
      }

      // 贺卡价格
      if (this.selectedCard) {
        total += this.selectedCard.price;
      }

      return total;
    },
    resetSelection() {
      this.selectedFlowers = [];
      this.selectedPackaging = null;
      this.selectedCard = null;
      this.cardMessage = "";
      this.bouquetName = "";
      this.previewImage = "@/assets/image.png";
      this.bouquetPrice = 0; // 重置价格
      this.activeTab = "flowers";
    },
    addToCart() {
      // 构建花束数据
      const bouquetData = {
        name: this.bouquetName || "自定义花束",
        price: this.calculateTotalPrice(),
        image: this.previewImage,
        flowers: [...this.selectedFlowers],
        packaging: this.selectedPackaging
          ? { ...this.selectedPackaging }
          : null,
        card: this.selectedCard
          ? { ...this.selectedCard, message: this.cardMessage }
          : null,
        type: "custom",
      };

      // 使用自定义事件发送数据到购物车组件
      const event = new CustomEvent("add-to-cart", {
        detail: bouquetData,
        bubbles: true,
      });
      window.dispatchEvent(event);
    },
    generateFromSelection() {
      // 检查是否有选择花材
      if (this.selectedFlowers.length === 0) {
        alert("请先选择至少一种花材");
        return;
      }
      this.$store.commit("changeActNum", 0);
      // 构建提示词
      let prompt = "";
      this.selectedFlowers.forEach((flower, index) => {
        prompt += `${flower.name}${flower.quantity}朵`;
        if (index < this.selectedFlowers.length - 1) {
          prompt += ", ";
        }
      });

      if (this.selectedPackaging) {
        prompt += `，使用${this.selectedPackaging.name}包装`;
      }
      console.log(this.calculateTotalPrice());
      this.$store.commit('changeFlowerMaterial', [prompt,this.calculateTotalPrice()]);
      this.$router.push({
        path: "/diy/diy-ai-speak",
        query: { Text:  "基于以下花材设计一束花: "+prompt },
      });
    },
  },
};
</script>

<style scoped>
.diy-page {
  padding-top: 20px; /* 为固定头部留出空间 */
  padding-bottom: 20px;
  /*   background: linear-gradient(135deg, #d693a1, #e2f5ff); */
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* 主要内容区域 */
.section-title {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.section-description {
  color: #666;
  margin-bottom: 1.5rem;
}

/* 自由创作区域 */
.free-creation-section {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

.preview-container {
  background-color: #f9f9f9;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.preview-info {
  padding: 1rem;
}

.preview-title {
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
  color: #333;
}

.preview-price {
  font-size: 1.3rem;
  font-weight: bold;
  color: #e75480;
  margin-bottom: 0.8rem;
}

.preview-details {
  color: #666;
  font-size: 0.9rem;
}

.preview-details p {
  margin-bottom: 0.3rem;
}

.action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  padding: 0 1rem 1rem;
}

.btn-outline {
  padding: 0.7rem 0;
  background: none;
  border: 1px solid #e75480;
  color: #e75480;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}

.btn-outline:hover {
  background-color: #f8e1e7;
}

.btn-primary {
  padding: 0.7rem 0;
  background-color: #e75480;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
}

.btn-primary:hover {
  background-color: #d64d7b;
}

/* 新增AI生成按钮样式 */
.btn-ai {
  padding: 0.7rem 0;
  background-color: #f8e1e7;
  border: 1px solid #e75480;
  color: #e75480;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: center;
}

.btn-ai:hover {
  background-color: #f5d0dc;
}

.selection-section {
  background-color: #f9f9f9;
  border-radius: 8px;
}

.selection-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
}

.tab-btn {
  flex: 1;
  padding: 0.8rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  color: #666;
  transition: all 0.3s;
  border-bottom: 2px solid transparent;
}

.tab-btn:hover {
  color: #e75480;
}

.tab-btn.active {
  color: #e75480;
  border-bottom-color: #e75480;
  font-weight: 500;
}

.selection-content {
  padding: 1.5rem;
  max-height: 600px;
  overflow-y: auto;
}

.selection-title {
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
  color: #333;
}

.selection-description {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

/* 花材选择 */
.flowers-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.flower-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  border: 2px solid transparent;
  height: 310px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flower-card:hover {
  transform: translateY(-3px);
}

.flower-card.selected {
  border-color: #e75480;
  box-shadow: 0 2px 10px rgba(231, 84, 128, 0.2);
}

.flower-image {
  height: 190px;
  overflow: hidden;
}

.flower-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flower-info {
  padding: 0.8rem;
}

.flower-name {
  font-size: 1rem;
  margin-bottom: 0.2rem;
  color: #333;
}

.flower-price {
  color: #e75480;
  font-weight: 500;
  margin-bottom: 0.8rem;
  font-size: 0.9rem;
}

.quantity-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.quantity-btn {
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s;
}

.quantity-btn:hover {
  background-color: #f0f0f0;
}

.quantity-btn:disabled {
  color: #ccc;
  cursor: not-allowed;
}

.plus-btn {
  color: #e75480;
  font-weight: bold;
}

.plus-icon {
  display: inline-block;
  font-weight: bold;
  color: #e75480;
}

.quantity {
  flex: 1;
  text-align: center;
  font-size: 0.9rem;
}

/* 包装选择 */
.packaging-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.packaging-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
  border: 2px solid transparent;
  height: 310px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.packaging-card:hover {
  transform: translateY(-3px);
}

.packaging-card.selected {
  border-color: #e75480;
  box-shadow: 0 2px 10px rgba(231, 84, 128, 0.2);
}

.packaging-image {
  height: 190px;
  overflow: hidden;
}

.packaging-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.packaging-info {
  padding: 0.8rem;
}

.packaging-name {
  font-size: 1rem;
  margin-bottom: 0.2rem;
  color: #333;
}

.packaging-price {
  color: #e75480;
  font-weight: 500;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.packaging-select {
  text-align: center;
  font-size: 0.9rem;
}

.select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.8rem;
  background: none;
  border: 1px solid #e75480;
  color: #e75480;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 0.8rem;
}

.select-btn:hover {
  background-color: #f8e1e7;
}

/* 贺卡选择 */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.card-item {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
  border: 2px solid transparent;
  padding: 0.8rem;
  height: 310px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-item:hover {
  transform: translateY(-3px);
}

.card-item.selected {
  border-color: #e75480;
  box-shadow: 0 2px 10px rgba(231, 84, 128, 0.2);
}

.card-image {
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.8rem;
}

.card-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.card-info {
  text-align: center;
  margin-bottom: 0.8rem;
}

.card-name {
  font-size: 1rem;
  margin-bottom: 0.2rem;
  color: #333;
}

.card-price {
  color: #e75480;
  font-weight: 500;
  font-size: 0.9rem;
}

.card-select {
  text-align: center;
  font-size: 0.9rem;
}

.card-message {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #eee;
}

.message-title {
  font-size: 1rem;
  margin-bottom: 0.8rem;
  color: #333;
}

.message-input {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
  font-size: 0.9rem;
  transition: all 0.3s;
}

.message-input:focus {
  outline: none;
  border-color: #e75480;
  box-shadow: 0 0 0 2px rgba(231, 84, 128, 0.1);
}
</style>